<template>
  <el-container class="container">
    <el-header height="100%" style="margin-bottom: -10px;padding-top: 10px">
      <el-form :model="userForm" ref="userForm" label-width="80px" class="form">
        <el-row>
          <el-col :span="6">
            <el-form-item label="登录地址" prop="loginAddress">
              <el-input v-model="userForm.loginAddress" clearable placeholder="请输入登录地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名称" prop="userName">
              <el-input v-model="userForm.userName" clearable placeholder="请输入用户名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="40px">
              <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
              <el-button @click="resetForm('userForm')" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="userData"
        style="width: 100%"
        border
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        >
        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="tokenId"
          label="会话编号"
          :show-overflow-tooltip="true"
          min-width="180">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="登录名称"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="loginIp"
          label="主机"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="loginAddress"
          label="登录地点"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="browser"
          label="浏览器"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="os"
          label="操作系统"
          :show-overflow-tooltip="true"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="loginTime"
          label="登录时间"
          min-width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="80">
          <template slot-scope="scope">
            <el-row>
              <el-button type="text" icon="el-icon-delete" size="small" @click="handlerRemove(scope.row.tokenId)">强退</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer height="30px">
      <el-row>
        <el-col :span="24" class="line">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
import onlineApi from "@/api/moniter/online";

export default {
  name: 'index',
  data() {
    return {
      userForm: {
        userName: '',
        loginAddress: ''
      },
      pageNo: 1,
      pageSize: 10,
      total: 0,
      userData: []
    };
  },
  created() {
    this.fetchData(1);
  },
  methods: {
    fetchData(pageNo = this.pageNo, pageSize = this.pageSize) {
      onlineApi.getOnlineUserList(pageNo, pageSize,this.userForm).then(res => {
        const returnData = res.data;
        this.pageNo = returnData.pageNum;
        this.total = returnData.total;
        this.userData = returnData.list;
      });
    },
    onSubmit() {
      this.fetchData(1);
    },
    resetForm(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
        this.fetchData(1);
      }
    },
    handlerRemove(tokenId) {
      let names = this.userData.filter(t => t.tokenId === tokenId).map(t => t.userName);
      this.$confirm('是否强退名称为"'+names+'"的用户?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        onlineApi.forceLogout(tokenId).then(res => {
          if (res.data === true) {
            this.fetchData(1);
            this.$message({
              message: '强退成功',
              type: 'success',
            });
          }
        });
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消强退'
          });
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData(1);
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.fetchData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

  },
};
</script>

<style scoped>
.line {
  text-align: center;
}

.form {
  /*padding-top: 20px;*/
  /*padding-bottom: -15px;*/
}

.container {
  padding: 20px 10px;
}
</style>
